<template>
  <div class="main-wrap-view">
    <div class="main-wrap-header">
      <div class="left">
        <div class="common-bkg-border logo">
          <div class="logo-content">
            <div class="logo-content-left">
              <img src="~@/assets/img/logo1.png" alt="">
            </div>
            <div class="logo-content-right">
              <div class="logo-content-right-top">
                <span>太仓市“标准地”三维动态监管系统</span>
              </div>
              <!-- <div class="logo-content-right-bottom">
                <span>Standard 3D dynamic supervision system</span>
              </div> -->
            </div>
          </div>
        </div>
        <!-- 图层 -->
        <div class="common-bkg-border menu-btn taicang" @click="showMask()">
          <div class="menu-icon">
            <img src="~@/assets/img/mask.svg" alt="">
          </div>
          <div class="menu-text">
            <span>图层</span>
          </div>
          <div class="menu-arrow">
            <img src="~@/assets/img/arrowdown.png" alt="">
          </div>
        </div>
        <!-- 太仓市 -->
        <div class="common-bkg-border menu-btn taicang" @click="showTaicang()">
          <div class="menu-icon">
            <img src="~@/assets/img/taicang.svg" alt="">
          </div>
          <div class="menu-text">
            <span>{{ option[index - 1].value }}</span>
          </div>
          <div class="menu-arrow">
            <img src="~@/assets/img/arrowdown.png" alt="">
          </div>
        </div>
        <!-- 登录 -->
        <div class="common-bkg-border menu-btn taicang" @click="showLogin()">
          <div class="menu-icon">
            <img src="~@/assets/img/login.svg" alt="">
          </div>
          <div class="menu-text">
            <span>{{ user.userUnit }}</span>
          </div>
        </div>
        <!-- 通知栏-->
        <div class="common-bkg-border menu-btn inform" @click="showInform()">
          <div
              class="menu-circle"
          >
            <span>{{userNum}}</span>
          </div>
          <div class="menu-picture">
            <div class="menu-icon">
              <img src="~@/assets/img/inform.svg" alt="">
            </div>
            <div class="menu-text">
              <span>通知栏</span>
            </div>
          </div>
        </div>
        <!-- 删选表-->
        <div class="common-bkg-border menu-btn taicang" @click="showForm()">
          <div class="menu-icon">
            <img src="~@/assets/img/allLandForm.svg" alt="">
          </div>
          <div class="menu-text">
            <span>筛选表</span>
          </div>
        </div>
      </div>

      <div class="middle" id="middleCompare">
        <div class="common-bkg-border menu-btn compare" @click="closeCompare">
          <div class="menu-text">
            <span>关闭双屏对比</span>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 首页 -->
        <div :class="{'is-active': isHome}" class="common-bkg-border menu-btn" @click="switchToComp('home')">
          <div class="menu-icon">
            <img src="~@/assets/img/home.svg" alt="">
          </div>
          <div class="menu-text">
            <span>首页</span>
          </div>
        </div>
        <!-- 搜索 -->
        <div :class="{'is-active': isSearch}" class="common-bkg-border menu-btn search" @click="switchToComp('search')">
          <div class="menu-icon">
            <img src="~@/assets/img/search.svg" alt="">
          </div>
          <div class="menu-text">
            <span>搜索</span>
          </div>
        </div>
        <!-- 申报 -->
        <div :class="{'is-active': isReport}" class="common-bkg-border menu-btn report" @click="switchReport">
          <div class="menu-icon">
            <img src="~@/assets/img/report.svg" alt="">
          </div>
          <div class="menu-text">
            <span>申报</span>
          </div>
        </div>
      </div>

    </div>

    <div class="main-wrap-center" >
      <!-- 图层 -->
      <maskComp v-if="isShowmaskComp" @close="isShowmaskComp=false"></maskComp>
      <!-- 太仓 -->
      <taicang v-show="isShowTaicang" @change-value="emitFn" @close="isShowTaicang =false"
               @refresh="homeRefresh"></taicang>
      <!-- 登陆 -->
      <login v-if="isShowLogin" @closeCard="hideLogin" :userType="user.userType" :userLocation="user.userLocation"
             :loginName="userName" :passWord="passWord"
      ></login>
      <!--通知栏-->
      <inform v-if="isShowInform"  @close="isShowInform =false" @refresh="getNum"></inform>
      <!-- 首页 -->
      <homePage v-if="isHome" :index="index"></homePage>
      <!-- 搜索 -->
      <search v-if="isSearch  " @refresh="searchRefresh" :userName="user.userUnit"></search>
      <!-- 申报 -->
      <reportComp v-if="isShowReport " @close="isShowReport =false"></reportComp>
      <!-- 时间线 -->
      <timeLine></timeLine>
    </div>
  </div>
</template>

<script lang="ts">
import {ref, computed, defineComponent, nextTick, getCurrentInstance, onMounted, reactive} from 'vue'
import maskComp from './components/mask/index.vue'
import taicang from './components/taicang/index.vue'
import login from './components/login/index.vue'
import homePage from './components/homePage/index.vue'
import search from './components/search/index.vue'
import reportComp from './components/reportComp/index.vue'
import inform from './components/inform/index.vue'
import timeLine from './components/timeLine/index.vue'
import {ElNotification, ElMessage} from "element-plus";
import axios from "axios";
import {useRouter} from "vue-router";

export default defineComponent({
  components: {maskComp, taicang, homePage, search, reportComp, login, timeLine,inform},
  props: ['userName','passWord'],
  setup(props, context) {
    const instance = getCurrentInstance();
    const {appContext} = getCurrentInstance();
    const yjs = instance?.appContext.config.globalProperties.yjs;
    const Cesium = instance?.appContext.config.globalProperties.Cesium;
    const api = instance?.appContext.config.globalProperties.api;
    const router = useRouter()
    //用户信息
    const user=reactive({
      id: '',
      userUnit: '',
      userType: '',
      userLocation: ''
    })
    //用户未读信息数量
    const userNum = ref(0)
    let index = ref('8')
    let isLogin = ref(false)
    let isShowInform = ref(false)
    let isShowForm = ref(false)
    const compName = ref('home')
    const isHome = computed(() => compName.value === 'home')
    const isSearch = computed(() => compName.value === 'search')
    const isReport = computed(() => compName.value === 'report')
    const arrData = [{},
      {name: "港区(浮桥镇)", position: {x: 121.188298, y: 31.600775, z: 30000}},
      {name: "高新区", position: {x: 121.140981, y: 31.486932, z: 20000}},
      {name: "城厢镇", position: {x: 121.0819, y: 31.4820, z: 30000}},
      {name: "沙溪镇", position: {x: 121.071977, y: 31.571735, z: 20000}},
      {name: "浏河镇", position: {x: 121.240121, y: 31.517145, z: 20000}},
      {name: "璜泾镇", position: {x: 121.088208, y: 31.673768, z: 20000}},
      {name: "双凤镇", position: {x: 121.035232, y: 31.489357, z: 20000}},
      {name: "太仓市", position: {x: 121.169223, y: 31.330908, z: 63864.892325, heading: 348, pitch: -70, roll: 0}},
    ];
    const option = [
      {
        value: '港区(浮桥镇)'
      },
      {
        value: '高新区'
      },
      {
        value: '城厢镇'
      },
      {
        value: '沙溪镇'
      },
      {
        value: '浏河镇'
      },
      {
        value: '璜泾镇'
      },
      {
        value: '双凤镇'
      },
      {
        value: '太仓市'
      },
      {
        value: '行政区划'
      }
    ]


    const getNum = ()=>{
      appContext.config.globalProperties.axios({
        url: `api/search/noticeTableNum`,
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("user",props.userName);
          return oMyForm;
        }]
      }).then((response) => {
        userNum.value = response.data
      })
    }

    function switchToComp(compType: string) {
      // 先关闭下拉
      isShowTaicang.value = false
      isShowmaskComp.value = false
      compName.value = compType
      if (compType === "home") {
        window.viewer.jrism.centerAt()
      }
    }

    function closeCompare() {
      document.getElementById("middleCompare").style.display = "none";
      document.getElementById("centerDivEx").style.display = "none";
      document.getElementById("centerDiv").style.width = "100%";
    }

    //展示通知栏
    const showInform =()=>{
      isShowInform.value = !isShowInform.value
      getNum()
    }

    //展示筛选表格
    const showForm =()=>{
      router.push({
        name: "allLandForm",
      })
    }
    const homeRefresh = () => {
      compName.value = 'search'
      nextTick(() => {
        compName.value = 'home'
      })
    }

    const searchRefresh = () => {
      compName.value = 'home'
      nextTick(() => {
        compName.value = 'search'
      })
    }

    function switchReport() {

      compName.value = 'home'
      nextTick(() => {
        compName.value = 'report'
        isShowReport.value = true
      })
    }

    const isShowmaskComp = ref(false)
    const isShowTaicang = ref(false)
    const isShowLogin = ref(false)
    const isShowReport = ref(false)

    function showMask() {
      isShowTaicang.value = false
      isShowLogin.value = false
      isShowTaicang.value = false
      isShowmaskComp.value = !isShowmaskComp.value


    }


    function showTaicang() {
      isShowmaskComp.value = false
      isShowmaskComp.value = false
      isShowLogin.value = false
      isShowTaicang.value = !isShowTaicang.value
    }

    function showLogin() {
      isShowmaskComp.value = false
      isShowTaicang.value = false
      isShowLogin.value = true
    }

    function hideLogin() {
      isShowLogin.value = false
    }

    function loginAction(name, password) {
      appContext.config.globalProperties.axios({
        url: `api/checkUser?name=${name}&password=${password}`,
        method: 'get',
      }).then((response) => {
        isLogin.value = response.data
        if (isLogin.value) {
          // loginText.value = name
          hideLogin();
          ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success',
          })
        } else {
          ElMessage({
            showClose: true,
            message: '登录密码不正确，请重新输入',
            type: 'warning',
          })
        }
      })
    }

    //定位过去面闪烁，后期改成geoserver查询
    var drawEntity = null;
    const emitFn = (v) => {
      index.value = v

      window.viewer.jrism.centerAt(arrData[v].position);
      // console.log(arrData[v].name);
      var dataSourceTemp = new Cesium.CustomDataSource("temp");
      window.viewer.dataSources.add(dataSourceTemp);
      axios.get(
          api.APILIST.geoserverURL +
          "/geoserver/taicang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=taicang%3Aregion&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=XZQMC='" + arrData[v].name + "'",
      )
          .then((result) => {
            // console.log(result);

            result.data.features.forEach((feature) => {
              let degArray = [];
              let _color;
              if (feature.geometry.type == "Polygon") {
                var coords = feature.geometry.coordinates[0];
                coords.forEach((coord) => {
                  degArray = degArray.concat(coord);
                });
              } else if (feature.geometry.type == "MultiPolygon") {
                feature.geometry.coordinates.forEach((coordinate) => {
                  coordinate[0].forEach((coord) => {
                    degArray = degArray.concat(coord);
                  });
                });
              }
              // console.log(degArray);

              _color = Cesium.Color.fromCssColorString("#D13939");
              var _entity = new Cesium.Entity({
                name: "temp",
                polygon: {
                  hierarchy: {
                    positions: Cesium.Cartesian3.fromDegreesArray(degArray),
                  },
                  // extrudedHeight: 50,
                  material: Cesium.Color.fromAlpha(_color, 0.5),
                  classificationType: Cesium.ClassificationType.TERRAIN,
                  // height: 0,
                  // clampToGround:true,
                  outline: false, // height is required for outline to display
                },
              });
              dataSourceTemp.entities.add(_entity);
              yjs.util.highlightEntity(_entity, {
                time: 4, //闪烁时长（秒）
                maxAlpha: 0.5,
                color: Cesium.Color.BLUE,
                onEnd: function () {
                  dataSourceTemp.entities.remove(_entity);
                  //结束后回调
                },
              });
              // dataSourceland.entities.add(_entity);
            });
          });
    }

    onMounted(()=> {
      appContext.config.globalProperties.axios({
        url: `api/finduser?username=${props.userName}&userpassword=${props.passWord}`,
        method: 'get',
      }).then((response) => {
        response.data.forEach(item => {
          user.id = item.userid
          user.userUnit = item.userunit
          user.userType = item.usertype
          user.userLocation = item.userxzq
        })
        localStorage.setItem("userType",user.userType)
        localStorage.setItem("userLocation",user.userLocation)
      })
      getNum()
    })
    return {
      isHome,
      isReport,
      showLogin,
      hideLogin,
      isLogin,
      loginAction,
      isShowLogin,
      isShowmaskComp,
      isSearch,
      isShowTaicang,
      switchToComp,
      showMask,
      showTaicang,
      emitFn,
      index,
      homeRefresh,
      searchRefresh,
      option,
      switchReport,
      isShowReport,
      closeCompare,
      isShowInform,
      showInform,
      user,
      showForm,
      userNum,
      getNum
    }
  }
})
</script>


<style scoped lang="scss">
.main-wrap-view {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  z-index: 10;
  pointer-events: none;

  .main-wrap-header {
    height: 72px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      pointer-events: auto;

      .logo {
        width: 398px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;

        .logo-content {
          display: flex;
          align-items: center;
          justify-content: center;

          .logo-content-left {
            position: absolute;
            width: 48px;
            height: 32px;
            left: 36px;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .logo-content-right {
            .logo-content-right-top {
              position: absolute;
              width: 18%;
              height: 32px;
              left: 90px;
              top: 40px;

              font-family: 'YouSheBiaoTiHei', monospace;
              font-style: normal;
              font-weight: 400;
              font-size: 20px;
              line-height: 32px;
              color: #FFFFFF;
            }

            .logo-content-right-bottom {
              position: absolute;
              width: 100%;
              height: 16px;
              left: 90px;
              top: 64px;

              font-style: normal;
              font-weight: 400;
              font-size: 10px;
              line-height: 16px;
              color: #FFFFFF;

            }
          }
        }
      }

      .mask {
        margin-left: 20px;
      }

      .inform{
        margin-left: 8px;
        display: grid;
        justify-content: space-around;
        align-items: start;
        justify-items: end;
        .menu-circle{
          display: inline-flex;
          height: 1.3vw;
          width: 1.2vw;
          background: #e3064f;
          border-radius: 11.16667vw;
          line-height: 1.25vw;
          text-align: center;
          color: #edffff;
          justify-content: center;
    }

    .menu-picture{
      display: flex;
      height: 40px;
    }
  }

  .taicang {
    margin-left: 8px;
  }

  .report {
    width: 30%;
    margin-left: 10px;

    .el-textarea {
      --el-input-text-color: #ffffff
    }
  }
}

.middle {
  display: flex;
  pointer-events: auto;
  padding-right: 10%;
  display: none;
}

.right {
  display: flex;
  pointer-events: auto;

  .report, .search {
    margin-left: 20px;
  }
}
}

.main-wrap-center {
flex: 1;
height: 0;
width: 100%;
position: relative;
}
}
</style>
